<template>
    <el-popover ref="popover" class="tree-select" v-model="visible" :placement="placement" trigger="click">
        <el-tree
            ref="tree"
            :data="treeOptions"
            :props="treeProps"
            node-key="id"
            :default-expand-all="defaultExpandAll"
            :highlight-current="true"
            :expand-on-click-node="true"
            :filter-node-method="filterNode"
            @current-change="selectChange"
        />
        <el-select
            v-model="value"
            slot="reference"
            filterable
            :filter-method="filterTreeData"
            :popper-append-to-body="false"
            :size="size"
            @clear="clearValue"
            :clearable="clearable"
            :placeholder="placeholder"
        ></el-select>
    </el-popover>
</template>

<script>
export default {
    name: 'treeSelect',
    model: {
        prop: 'selectValue',
        event: 'selectChange'
    },
    props: {
        clearable: {
            type: Boolean,
            default: true
        },
        selectValue: {
            type: [Number, String],
            default: ''
        },
        treeOptions: {
            type: Array,
            default: () => []
        },
        size: {
            type: String,
            default: 'small'
        },
        treeProps: {
            type: Object,
            default: () => {
                return {
                    value: 'id',
                    label: 'label',
                    children: 'children'
                }
            }
        },
        nodeKey: {
            type: String,
            default: ''
        },
        placeholder: {
            type: String,
            default: '请选择'
        },
        placement: {
            type: String,
            default: 'bottom-start'
        },
        defaultExpandAll: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            visible: false,
            value: ''
        }
    },
    watch: {
        selectValue(newValue, oldValue) {
            this.value = this.findLabel(this.treeOptions, newValue)
        }
    },
    methods: {
        filterTreeData(val) {
            this.$refs.tree.filter(val)
        },
        findLabel(data, value) {
            if (value) {
                for (let i = 0; i < data.length; i++) {
                    let item = data[i]
                    if (item[this.treeProps.value] === this.selectValue) {
                        return item[this.treeProps.label]
                    } else {
                        if (item[this.treeProps.children] && item[this.treeProps.children].length > 0) {
                            return this.findLabel(item[this.treeProps.children], value)
                        }
                    }
                }
            } else {
                return ''
            }
        },
        clearValue() {
            this.$emit('selectChange', '')
            this.$emit('getNodeData', null)
            this.filterTreeData('')
        },
        selectChange(data) {
            this.$emit('selectChange', data[this.treeProps.value])
            this.$emit('getNodeData', data)
            this.visible = false
        },
        filterNode(value, data) {
            if (!value) return true
            return data[this.treeProps.label].indexOf(value) !== -1
        }
    }
}
</script>

<style lang="scss">
.tree-select .el-select-dropdown {
    display: none;
}
</style>
